<template>
  <div id="index">
    <!--搜索框-->
    <Sticky>
      <Search id="searchBox" shape="round" @search="onSearch()" v-model="searchVal" placeholder="请输入搜索关键词后回车"/>
    </Sticky>
<!--    &lt;!&ndash;功能栏&ndash;&gt;-->
<!--    <div class="base-func">-->
<!--      <div v-for="(base, index) in baseFunc" :key="index">-->
<!--        <img class="func-img" :src="getIcon(base.icon)">-->
<!--        <span>{{base.name}}</span>-->
<!--      </div>-->
<!--    </div>-->
    <!--活动栏-->
    <div id="some-activity">
      App热门活动
    </div>
    <!--瀑布流商品-->
    <div id="item-flow">
      <div class="item" v-for="item in flowItems" :key="item.id">
        <FlowItem :item="item" @dislike="dislike"></FlowItem>
      </div>
    </div>
  </div>
</template>

<script>
import {Sticky, Search} from 'vant'
import FlowItem from '../../components/FlowItem'

export default {
  name: 'Index',
  components: {
    Sticky,
    FlowItem,
    Search
  },
  data () {
    return {
      searchVal: '',
      flowItems: [],
      baseFunc: []
    }
  },
  created () {
    this.flowItems = [
      {
        id: 1,
        type: 1,
        name: '出售一张超级帅的死神图片',
        price: 29.9,
        payedNum: 4325,
        imgUrl: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=801475073,2329603026&fm=26&gp=0.jpg'
      },
      {
        id: 2,
        type: 2,
        name: '火影忍者',
        price: 30.0,
        payedNum: 2625,
        imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F23%2F20180823185723_voqky.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1615544654&t=664088a8a8f03909cc2a2576dc86ce0c'
      },
      {
        id: 3,
        type: 3,
        name: '想跟我一起去寻找龙珠的秘密吗',
        price: 20.9,
        payedNum: 475,
        imgUrl: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4002572669,3243905454&fm=26&gp=0.jpg'
      },
      {
        id: 4,
        type: 1,
        name: '我就是L',
        price: 19.9,
        payedNum: 7515,
        imgUrl: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=818218123,1668552598&fm=26&gp=0.jpg'
      },
      {
        id: 5,
        type: 2,
        name: '过了这村没这店',
        price: 88.8,
        payedNum: 9215,
        imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi1.hdslb.com%2Fbfs%2Farchive%2F7ea7406d87a0c2b22ce29bed0ab6201d74b0b302.jpg&refer=http%3A%2F%2Fi1.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1615544952&t=6ab7b707f340352aaaebaeb8af7506db'
      },
      {
        id: 6,
        type: 3,
        name: '被支配的恐惧',
        price: 999.0,
        payedNum: 3223,
        imgUrl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2762516417,1589137703&fm=26&gp=0.jpg'
      }
    ]

    this.baseFunc = [
      {
        name: '农场',
        icon: 'tree'
      },
      {
        name: '借钱',
        icon: 'card'
      },
      {
        name: '超市',
        icon: 'mall'
      },
      {
        name: '游戏',
        icon: 'games'
      }
    ]
  },
  methods: {
    onSearch () {
      this.$router.push({name: 'SearchList', params: {searchVal: this.searchVal}})
    },
    getIcon (name) {
      return require(`@/assets/base/${name}.svg`)
    },
    dislike (type, id) {
      this.flowItems = this.flowItems.filter(item => item.id !== id)
      if (type) {
        // todo more
      }
    }
  }
}
</script>

<style scoped lang="less">
  #some-activity {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1rem;
    color: white;
    font-size: 0.5rem;
    margin: 0.3rem;
    border-radius: 0.2rem;
    background: linear-gradient(90deg, deepskyblue, lightskyblue);
  }

  #item-flow {
    margin: 0 0.2rem;
    column-count: 2;
    column-gap: 0.2rem;

    .item {
      break-inside: avoid;
      margin-bottom: 0.2rem;
      background-color: lightskyblue;
      border-radius: 0.1rem;
      overflow: hidden;
    }
  }

  .base-func {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    font-size: 0.5rem;
    padding: 0.2rem;
    background: linear-gradient(white 80%, whitesmoke);

    div {
      text-align: center;
      display: flex;
      width: 12%;
      /*height: 2rem;*/
      flex-direction: column;
      align-content: space-between;

      img {
        height: 100%;
        width: 100%;
      }

      span {
        font-size: 0.1rem;
      }
    }
  }

</style>
